<template>
	<view>
		<u-toast ref="uToast" />
		<u-navbar :title-bold='true' title-color="black" :border-bottom='false' title="添加好友" :is-fixed="true"
			:placeholder="true"> </u-navbar>
		<!-- <view class="tabs-box-f">
			<view class="tabs-box">
				<u-tabs :list="tabs" :is-scroll="false" :current="tabCurrent" @change="tabChange"></u-tabs>
			</view>
		</view> -->
		<view class="search-box">
			<u-search @change="search(1)" v-model="keywords" @clear="keywords=''" class="search-box-u-search"
				placeholder="输入关键词" :clearabled="true" :animation="true" :show-action='false'></u-search>
		</view>
		<view class="search-res">
			<view v-for="(item,index) in res" :key="index" class="contact-item"
				@click="goCenterInfo(item.user_id, item.type)">
				<image class="contact-item-avatar" :src="item.avatar" mode="widthFix"></image>
				<view class="contact-item-info">
					<view class="contact-item-info-item contact-item-info-name">{{item.nickname}}</view>
					<view class="contact-item-info-item">{{item.bio}}</view>
				</view>
				<u-button v-if="item.job==1 && user.job==1"
					@click.stop="clickContact(item.user_id, item.type, item.button.action, item.button.opt)" size="mini"
					class="contact-item-button">{{item.button.text}}</u-button>
			</view>
		</view>
		<u-loadmore margin-top="40" margin-bottom="40" :status="loadStatus" :icon="false" :loadText="loadText" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keywords: '',
				tabs: [{
						name: '找好友'
					},
					{
						name: '找群'
					},
				],
				tabCurrent: 0,
				res: [],
				loadStatus: 'loadmore',
				loadText: {
					loadmore: '请输入关键词搜索用户',
					loading: '努力加载中...',
					nomore: '没有更多了~'
				},
				commonTips: '',
				user: ''
			}
		},

		onShow() {
			this.ws.checkNetwork(this)
			this.user = this.ws.getUserInfo()
		},
		methods: {
			search: function(page = 1) {
				var that = this
				if (that.keywords) {
					that.ws.pageFun(function() {
						let message = {
							c: 'User',
							a: 'searchNewContact',
							data: {
								'keyword': that.keywords,
								'type': that.tabCurrent == 0 ? 'friends' : 'group',
								'page': page
							}
						}
						that.ws.send(message);
					}, that)
				}


			},
			tabChange: function(index) {
				this.tabCurrent = index
				if (this.keywords) {
					this.search()
				}
			},
			onReachBottom: function() {
				if (this.newContactData) {
					this.search(parseInt(this.newContactData.page) + 1)
				}
			},
			goCenterInfo: function(id, type) {
				uni.navigateTo({
					url: '/sub/center/mine/userInfo?id=' + id
				})

			},
			clickContact: function(id, type, action, opt = false) {
				if (action == 'open-session') {
					let message = {
						c: 'Message',
						a: 'openSession',
						data: {
							'id': id,
							'type': type
						}
					}
					this.ws.send(message);
				} else if ((action == 'userinfo-opt' && opt == 'join') || action == 'add-friends') {
					// 加好友
					uni.navigateTo({
						url: '/sub/center/mine/userInfo?id=' + id
					})
					// uni.navigateTo({
					// 	url: '/sub/search/add-contact?id=' + id + '&type=' + type
					// })
				}
			}
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}

	.tabs-box {
		width: 50vw;
		margin: 0 auto;
	}

	.search-box {
		display: flex;
		align-items: center;
		padding: 20rpx 4vw;
	}

	.search-box .search-box-u-search {
		flex: 1;
	}

	.contact-item {
		display: flex;
		width: 100vw;
		align-items: center;
		padding: 20rpx 4vw;
	}

	.contact-item-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 16rpx;
	}

	.contact-item-info {
		padding-left: 20rpx;
		width: 64%;
	}

	.contact-item-info-item {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.contact-item-info-name {
		font-size: 32rpx;
	}

	.contact-item-button {
		margin-left: auto;
	}
</style>